<template>
    <div class="set-reach">
        <el-form
            :model="form"
            ref="form"
            @submit.native.prevent
        >
            <el-form-item
                label="考核项名称："
                prop="name"
                label-width="125px"
                :rules="{
                    required: true, message: '请输入考核项名称', trigger: 'blur'
                }"
            >
                <div class="reach-title">
                    <el-input
                        maxlength="15"
                        placeholder="输入名称"
                        v-model.trim="form.name"
                        show-word-limit
                    >
                    </el-input>
                </div>
            </el-form-item>
            <div
                class="row"
                v-for="(items, index) in form.concludeCheckSubs"
                :key="items.key"
            >
                <div class="col1">
                    <el-form-item
                        label="考核分项名称："
                        label-width="125px"
                        :prop="'concludeCheckSubs.' + index + '.name'"
                        :rules="{
                            required: true, message: '请输入考核分项名称', trigger: 'blur'
                        }"
                    >
                        <el-input
                            maxlength="15"
                            placeholder="输入名称"
                            v-model.trim="items.name"
                            show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                </div>
                <div class="col3">
                    <el-form-item
                        label="设置权重："
                        label-width="100px"
                        :prop="'concludeCheckSubs.' + index + '.weight'"
                        :rules="{
                            required: true, message: '请设置权重', trigger: 'blur'
                        }"
                    >
                        <el-input-number
                            controls-position="right"
                            placeholder="输入权重值"
                            :precision="0"
                            v-model="items.weight"
                            :min="1"
                            :max="100"
                        >
                        </el-input-number>
                    </el-form-item>
                </div>
                <div class="col4">
                    <el-form-item
                        label="系统关联："
                        label-width="100px"
                    >
                        <el-select
                            v-model="items.sysFunc"
                            clearable
                            placeholder="选择系统关联"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.sysFunkKey"
                                :label="item.sysFunkName"
                                :value="Number(item.sysFunkKey)"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="col5">
                    <i v-if="index == 0" class="el-icon-circle-plus-outline" @click="add"></i>
                    <i v-else class="el-icon-remove-outline" @click="remove(items)"></i>
                </div>
            </div>

            <el-form-item class="sub-btn">
                <el-button
                    round
                    class="btn-hover"
                    :loading="loading"
                    size="small"
                    @click="sub"
                >
                    {{ btnText }}
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addCheck, reachList, checkDetail, updateCheck, getSysInfo } from '../../../../../../api/courseReach';
export default {
    data() {
        return {
            btnText: '',
            loading: false,
            type: null,
            form: {
                concludeCheckSubs: [{
                    name: '',
                    checkId: '',
                    refConcludeCourseIds: [],
                    weight: undefined,
                    sysFunc: ''
                }],
                name: '',
                concludeId: ''
            },
            options: []
        };
    },
    created() {
        const { id, cid } = this.$route.query;

        if (id) {
            this.btnText = '更新';
            this.type = 1;
            this.checkInfo(id);

        } else {
            this.type = 2;
            this.btnText = '保存';
        }

        this.form.concludeId = cid;

        this.getSysInfo();
    },
    methods: {
        checkInfo(id) {
            checkDetail({
                checkId: id
            }).then((res) => {
                const { id, name, concludeId, concludeCheckSubs } = res.data;
                this.form.name = name;
                this.form.id = id;
                this.form.concludeId = concludeId;
                this.form.concludeCheckSubs = concludeCheckSubs;
            })
        },
        getSysInfo() {
            getSysInfo().then((res) => {
                this.options = res.data;
            });
        },
        sub() {

            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if(this.type == 1) {
                        updateCheck(this.form).then((res) => {
                            this.$message.success('修改成功');
                            this.loading = false;
                            this.$router.push({
                                name: 'ReachDegree',
                                query: { id: this.form.concludeId }
                            });
                        }).catch(() => {
                            this.loading = false;
                        });
                    }

                    if (this.type == 2) {
                        addCheck(this.form).then((res) => {
                            this.$message.success('创建成功');
                            this.loading = false;
                            this.$router.push({
                                name: 'ReachDegree',
                                query: { id: this.form.concludeId }
                            });
                        }).catch(() => {
                            this.loading = false;
                        });
                    }

                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        remove(item) {
            var index = this.form.concludeCheckSubs.indexOf(item)
            if (index !== -1) {
                this.form.concludeCheckSubs.splice(index, 1)
            }
        },
        add() {
            this.form.concludeCheckSubs.push({
                name: '',
                checkId: '',
                refConcludeCourseIds: [],
                weight: undefined,
                sysFunc: ''
            });
        }
    }
}
</script>

<style lang="scss">
.set-reach {
    .reach-title {
        width: 300px;
        .el-input__inner {
            width: 300px;
        }
    }
    .el-form-item__content {
        line-height: 30px;
    }
    .el-form-item {
        margin-bottom: 0px;
    }
    .col1 {
        .el-input__inner {
            width: 300px;
        }
    }

    .col2 {
        .el-input__inner {
            width: 320px;
        }
    }

    .col3 {
        .el-input-number {
            width: 150px;
            line-height: 32px;
            .el-input__inner {
                text-align: left;
            }
        }

        .el-input-number__increase,.el-input-number__decrease {
            line-height: 15px !important;
        }

    }

    .col4 {
        .el-input__inner {
            width: 150px;
        }
    }

    .sub-btn {
        padding: 52px 0 30px;
        text-align: center;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }
}

.tips-content {
    width: 420px;
    max-height: 300px;
    overflow: auto;
    &::-webkit-scrollbar{
        width: 6px;
        height: 6px;
        background-color: rgba(0,0,0,0.09);
    }
    &::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.5);
    }
    p {
        margin-top: 5px;
        line-height: 20px;
    }

    li~li {
        margin-top: 20px;
    }
}

</style>

<style lang="scss" scoped>
.set-reach {
    width: 1200px;
    margin: 0 auto 200px auto;
    box-sizing: border-box;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
    background: #fff;
    padding: 36px 41px 0;
    border-radius: 0 0 5px 5px;
    min-height: 400px;
    .btn-hover:hover {
        background: #1277eb;
        color: #fff;
    }
    .tips {
        outline: none;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        color: #385899;
        img {
            width: 16px;
            height: 16px;
        }

        .img-hover {
            display: none;
        }

        span {
            display: inline-block;
            vertical-align: middle;
        }

        .class-target-tips:hover {
            color: #1277eb;
            .img-default {
                display: none;
            }

            .img-hover {
                display: inline-block;
            }
        }
    }
    .row {
        display: flex;
        margin-top: 20px;
        .col1 {
            width: 425px;
        }
        .col2 {
            margin-left: 15px;
            width: 320px;
        }

        .col3, .col4 {
            margin-left: 15px;
        }

        .col4 {
            width: 250px;
        }

        .col5 {
            padding-top: 8px;
            margin-left: 20px;
            font-size: 17px;
            display: inline-block;
            i {
                cursor: pointer;
            }

            .el-icon-circle-plus-outline {
                color: #1277EB;
            }

            .el-icon-remove-outline {
                color: #F56C6C;
            }
        }
    }
}
</style>
